<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>demo</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="lib/swiper.min.css">
    <link rel="stylesheet" href="css/choose.css">
    <link rel="stylesheet" type="text/css" href="css/kefu.css">
    <style type="text/css">
        .swiper-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            top: 10px;
            opacity: 0;
            -webkit-transition: opacity 1s;
        }

        .swiper-container[show] {
            opacity: 1;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-pagination-fraction {
            bottom: inherit;
            left: inherit;
            width: auto;
            right: 5px;
            top: 3px;
            height: 30px;
            width: 30px;
            background: #ccc;
            border-radius: 100%;
            line-height: 30px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }

        .swiper-pagination-total {
            font-size: 12px;
        }

        .next_btn {
            width: 25%;
            height: auto;
            margin-left: 37.5%;
            margin-top: 10%;
        }

        .next_btn img {
            width: 100%;
            height: auto;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        a.shift img {
            width: 80%;
            height: auto;
            margin-top: 10%;
        }

        .panel {
            overflow: hidden;
            margin-bottom: 10px;
        }

        .left_child_btn, .left_child, .left_weel {
            width: 50%;
            height: 24%;
            float: left;
        }

        .left_child img, .left_weel img {
            width: 100%;
            height: auto;
        }

        .left_child_btn {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .linkUP {
            display: inline-block;
            width: 70%;
            height: 20px;
            border: 1px solid #050505;
            text-align: center;
            margin-left: 15%;
            color: #3f3f3f
        }

        .linkUP_active {
            background: #000;
            color: #fff !important;
        }

        .left_weel_btn {
            width: 10%;
            height: auto;
            float: left;
            margin-left: 20%;
        }

        .left_weel_btn img {
            width: 100%;
            height: auto;
        }

        .left_weel_btn2 {
            margin-left: 70%;
        }

        .page-choose .list ul li:nth-child(1) .am-flexbox-item:nth-child(1) .name:after {
            background-image: linear-gradient(#3e3f3f, #0b0e19);
        }

        .page-choose .list ul li:nth-child(1) .am-flexbox-item:nth-child(2) .name:after {
            background-image: linear-gradient(#374b72, #1e273a);
        }

        .page-choose .list ul li:nth-child(2) .am-flexbox-item:nth-child(1) .name:after {
            background-image: linear-gradient(#695543, #382f28);
        }

        .page-choose .list ul li:nth-child(2) .am-flexbox-item:nth-child(2) .name:after {
            background-image: linear-gradient(#dc2a2a, #920604);
        }

        .page-choose .list ul li:nth-child(3) .am-flexbox-item:nth-child(1) .name:after {
            background-image: linear-gradient(#e5e6e7, #90949c);
        }

        .page-choose .list ul li:nth-child(3) .am-flexbox-item:nth-child(2) .name:after {
            background-image: linear-gradient(#fcfcfc, #dfdfdf);
        }

        .nav {
            position: fixed;
            z-index: 99;
            background: #000;
            width: 60%;
            height: 100%;
            left: -100%;
            top: 0px;
            opacity: 0.8;
        }

        .mask {
            position: fixed;
            z-index: 9;
            background: #000;
            width: 100%;
            height: 100%;
            top: 0px;
            opacity: 0.2;
            left: 0%;
            display: none;
        }

        .nav p {
            width: 100%;
            border-top: 1px solid #fff;
            color: #fff;
            text-align: center;
            font-size: 1.2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body class="page-choose am-flexbox-v">
<div class="top">
    <a class="shift"><img src="img/nav.png"></a>
    Choose Your Colour
</div>
<div class="mask"></div>
<div class="nav am-flexbox-v">
    <p class="am-flexbox-item">Home Page</p>

    <p class="am-flexbox-item">Campaign</p>

    <p class="am-flexbox-item">Web Navigation</p>

    <p class="am-flexbox-item">My Favourite</p>

    <p class="am-flexbox-item">My Order</p>

    <p class="am-flexbox-item">My Dealer</p>

    <p class="am-flexbox-item">Address Management</p>
</div>
<div class="menu am-flexbox" id="J-menu">
    <a href="javascript:;" class="am-flexbox-item" on>Colour</a>
    <a href="javascript:;" class="am-flexbox-item">Interior</a>
    <a href="javascript:;" class="am-flexbox-item">Others</a>
</div>
<div class="container list" data-type="colour">
    <ul id="J-colourList">
        <li class="am-flexbox">
            <div class="am-flexbox-item">
                <div class="name">Cosmos black</div>
                <div class="pic"><img src="img/cars/car2_01.png"></div>
            </div>
            <div class="am-flexbox-item">
                <div class="name">Cavansite blue</div>
                <div class="pic"><img src="img/cars/car2_02.png"></div>
            </div>
        </li>
        <li class="am-flexbox">
            <div class="am-flexbox-item">
                <div class="name">Orient brown</div>
                <div class="pic"><img src="img/cars/car2_03.png"></div>
            </div>
            <div class="am-flexbox-item">
                <div class="name">Jupiter red</div>
                <div class="pic"><img src="img/cars/car2_04.png"></div>
            </div>
        </li>
        <li class="am-flexbox">
            <div class="am-flexbox-item">
                <div class="name">Mountain grey</div>
                <div class="pic"><img src="img/cars/car2_05.png"></div>
            </div>
            <div class="am-flexbox-item">
                <div class="name">Polar white</div>
                <div class="pic"><img src="img/cars/car2_06.png"></div>
            </div>
        </li>
    </ul>
    <div class="swiper-container">

    </div>
    <!-- Swiper JS -->
    <div class="next_btn fn-hide" id="colourBtn">
        <img src="img/next.png">
    </div>
</div>
<div class="container fn-hide am-flexbox-item banner" id="J-banner" data-type="interior"
     style="background-image: url('img/iris.jpg');">
    <div class="next_btn" id="interBtn">
        <img src="img/next.png">
    </div>
</div>

<script type="text/bsl" id="J-swiperContainerTpl">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/slide2_1.png"></div>
        <div class="swiper-slide"><img src="img/slide2_2.png"></div>
        <div class="swiper-slide"><img src="img/slide2_3.png"></div>
        <div class="swiper-slide"><img src="img/slide2_4.png"></div>
    </div>
    <div class="swiper-pagination"></div>



</script>

<div class="container  others  fn-hide" data-type="others">
    <div class="panel">
        <div class="header">Exterior Option</div>
        <div class="exterior left_parent">
            <div class="left_option left_child">
                <img src="img/option_02.png">
            </div>
            <div class="left_option left_child">
                <img src="img/option_02.png">
            </div>
            <div class="left_option left_child_btn">
                <a href="javascript:" class="linkUP linkUP1">Upgrade</a>
            </div>
            <div class="left_option left_child_btn">
                <a href="javascript:" class="linkUP linkUP2 linkUP_active">Selected</a>
            </div>
            <div class="left_option left_child">
                <img src="img/option_05.png">
            </div>
            <div class="left_option left_child">
                <img src="img/option_06.png">
            </div>

            <div class="left_option left_child_btn">
                <a href="javascript:" class="linkUP linkUP2 linkUP_active">Selected</a>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="header">Wheel</div>
        <div class="exterior left_parent">
            <div class="left_option left_weel">
                <img src="img/weel_one.png">
            </div>
            <div class="left_option left_weel">
                <img src="img/weel_two.png">
            </div>
            <div class="left_option left_weel_btn">
                <img src="img/select_ok.png" id="weelok">
            </div>
            <div class="left_option left_weel_btn2">
                <img src="img/select_no.png" id="weelno">
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="header">Horse Power</div>
        <div class="choice">
            <a href="javascript:;">125 kW (170 HP)</a>
            <a href="javascript:;">125 kW (170 HP)</a>
            <a href="javascript:;">125 kW (170 HP)</a>
        </div>
    </div>
    <div class="result">
        MSRP:488,000.00 RMB
    </div>
    <a href="testDrive.html" target="_self">
        <div class="next_btn" id="otherBtn">
            <img src="img/next.png">
        </div>
    </a>
</div>
<div class="ke" id="kefu">
    <img src="img/kefu1.png" id="duihua">
</div>
<div class="contain_share">
    <div class="share_dialog">
        <a href="javascript:void(0)" class="close"></a>
        <img src="img/dialog.png">
    </div>
</div>

<script src="lib/zepto.min.js"></script>
<script src="lib/swiper.min.js"></script>
<script src="js/orientation.js"></script>
<script type="text/javascript" src="js/kefu.js"></script>
<!-- Initialize Swiper -->
<script type="text/javascript">

    $(function () {

        var colourItems = document.getElementById("J-colourList").querySelectorAll('li');
        Array.prototype.forEach.call(colourItems, function (item, i) {
            setTimeout(function () {
                item.setAttribute('run', true);
            }, 200 * i);
            if (i == 0) {
                $(item).children('.am-flexbox-item').eq(0).attr('on', true);
            }
        });


        setTimeout(function () {
            var html = $('#J-swiperContainerTpl').html();
            $('.swiper-container').html(html).attr('show', true);
            $('#colourBtn').show();

            var swiper = new Swiper('.swiper-container', {
                loop: true,
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                paginationFractionRender: function (swiper, currentClassName, totalClassName) {
                    return '<span class="' + currentClassName + '"></span>' +
                            '/' +
                            '<span class="' + totalClassName + '"></span>';
                }
            });
        }, 1000);
        $(".shift").click(function () {
            $(".nav,.mask").animate({left: "0"}, 500);
            $(".mask").css("display", "block")
        })
        $(".mask").click(function () {
            $(".nav").animate({left: "-100%"}, 500);
            $(".mask").css("display", "none")
        })
        $(".left_weel_btn").click(function () {
            if ($("#weelok").attr("src") == "img/select_no.png") {
                $("#weelok").attr("src", "img/select_ok.png");
                $("#weelno").attr("src", "img/select_no.png");
            } else {
                $("#weelok").attr("src", "img/select_no.png");
                $("#weelno").attr("src", "img/select_ok.png");
            }

        });
        $(".left_weel_btn2").click(function () {
            if ($("#weelok").attr("src") == "img/select_no.png") {
                $("#weelok").attr("src", "img/select_ok.png");
                $("#weelno").attr("src", "img/select_no.png");
            } else {
                $("#weelok").attr("src", "img/select_no.png");
                $("#weelno").attr("src", "img/select_ok.png");
            }

        });

        //菜单切换事件
        $('#J-menu a').on('click', function () {
            var index = $(this).index();
            toPage(index);
        });

        function toPage(i) {
            $('#J-menu a').eq(i).attr('on', true).siblings().removeAttr('on');
            $('.container').eq(i).show().siblings('.container').hide();

            if (i == 1) {
                (new Orientation()).init({
                    width: 1000 / 295 * document.getElementById("J-banner").clientHeight,
                    dom: document.getElementById("J-banner")
                });
            }
        }

        $('#J-colourList .am-flexbox-item').on('click', function () {
            $('#J-colourList .am-flexbox-item').removeAttr('on');
            $(this).attr('on', true);
        });

        $(".choice a").click(function () {
            $(this).addClass("linkUP_active").siblings().removeClass("linkUP_active");
        });
        $(".linkUP1, .linkUP2").on('click', function () {
            $(this).toggleClass("linkUP_active");
        });
        $("#colourBtn").click(function () {
            toPage(1);
        });
        $("#interBtn").click(function () {
            toPage(2);
        })
    });

</script>
</body>
</html>